<template>
	<div>
		<div class="barrages-drop">
		<!-- 	<img src="../assets/image/bk1.gif" style="height: 10%;width: 100%;"/> -->
			<vue-baberrage
			  :isShow="barrageIsShow"
			  :barrageList="barrageList"
			  :maxWordCount="maxWordCount"
			  :throttleGap="throttleGap"
			  :loop="barrageLoop"
			  :boxHeight="boxHeight"
			  :messageHeight="messageHeight"
			>
			</vue-baberrage>
			<div class="ui action input" style="margin-top: 25%;margin-left: 45%;">
			  <input v-model="message" style="background-color: rgb(233,119,148);" type="text" placeholder="评论一下...">
			  <button @click="submit" class="ui button" style="background-color: pink;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">留言</font></font></button>
			</div>
		</div>
	</div>
</template>
<script>
import Vue from 'vue';
import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';

Vue.use(vueBaberrage);

export default {
	name: 'Barrages',
	data() {
		return {
			msg: '马优晨就是个辣鸡~',
			barrageIsShow: true,
			messageHeight: 3,
			boxHeight: 300,
			barrageLoop: true,
			maxWordCount: 5,
			throttleGap: 5000,
			barrageList: [],
			
			//留言信息
			message:""
		};
	},
	mounted() {
		this.addToList();
	},
	methods: {
		submit(){
			var that=this
			var message_jump=that.message.replace(/(^\s*)|(\s*$)/g, "");
			if(message_jump!=""){
				//保存消息
				axios.post("http://"+that.$store.state.host+":8181/message/save_message/"+message_jump).then(function(res){
					if(res.data.status==true){
						that.$message({
						  message: '留言成功!',
						  type: 'success'
						});
					}else{
						that.$message.error('留言失败!');
					}
					//清空输入框!
					that.message=""
				});
			}else{
				that.$message({
				  message: '消息不能为空或者全为空格哟!',
				  type: 'warning'
				});
			}
		},
		addToList() {
			var that=this
			let list = [
				{
					id: 1,
					avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
					msg: this.msg,
					time: 8,
					barrageStyle: 'red'
				},
				{
					id: 2,
					avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 7,
					barrageStyle: 'green'
				},
				{
					id: 3,
					avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fHBlcnNvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 8,
					barrageStyle: 'normal'
				},
				{
					id: 4,
					avatar: 'https://images.unsplash.com/photo-1529429617124-95b109e86bb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGRvZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 14,
					barrageStyle: 'blue'
				},
				{
					id: 5,
					avatar: 'https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGRvZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 6,
					barrageStyle: 'red'
				},
				{
					id: 6,
					avatar: 'https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 9,
					barrageStyle: 'normal'
				},
				{
					id: 7,
					avatar: 'https://images.unsplash.com/photo-1561948955-570b270e7c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 10,
					barrageStyle: 'red'
				},
				{
					id: 8,
					avatar: 'https://images.unsplash.com/photo-1470509037663-253afd7f0f51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Zmxvd2VyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 5,
					barrageStyle: 'normal'
				},
				{
					id: 9,
					avatar: 'https://images.unsplash.com/photo-1527061011665-3652c757a4d4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGZsb3dlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 8,
					barrageStyle: 'red'
				},
				{
					id: 10,
					avatar: 'https://images.unsplash.com/photo-1524502397800-2eeaad7c3fe5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGJlYXV0eXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
					msg: this.msg,
					time: 12,
					barrageStyle: 'yellow'
				}
			];
			// list.forEach((v) => {
			// 	this.barrageList.push({
			// 		id: v.id,
			// 		avatar: v.avatar,
			// 		msg: v.msg,
			// 		time: v.time,
			// 		type: MESSAGE_TYPE.NORMAL,
			// 		barrageStyle: v.barrageStyle
			// 	});
			// });
			axios.get("http://"+that.$store.state.host+":8181/message/findAllMessage").then(function(res){
				// console.log(res)
				var messages=res.data.map.data
				for(var i=0;i<messages.length;i++){
					var index=i%10;
					that.barrageList.push({
						id:i,
						avatar:list[index].avatar,
						msg:messages[i].message,
						time:list[index].time,
						type:MESSAGE_TYPE.NORMAL,
						barrageStyle:list[index].barrageStyle
					})
				}
			})
		}
	}
};
</script>
<style  lang="less">
.barrages-drop{
	height: 700px;
	background-image: url(../assets/image/bk1.gif);
}
.barrages-drop {
	.blue {
		border-radius: 100px;
		background: #e6ff75;
		color: #fff;
	}

	.green {
		border-radius: 100px;
		background: #75ffcd;
		color: #fff;
	}
	.red {
		border-radius: 100px;
		background: #e68fba;
		color: #fff;
	}
	.yellow {
		border-radius: 100px;
		background: #dfc795;
		color: #fff;
	}
	.baberrage-stage {
		position: absolute;
		width: 100%;
		height: 212px;
		overflow: hidden;
		top: 0;
		margin-top: 130px;
	}
}
</style>